<template>
  <div>
    <div class="top">
      <van-icon @click="goback" class="zuo" name="arrow-left" />
      新增地址
    </div>
    <van-address-edit
      :area-list="areaList"
      show-postal
      show-delete
      show-set-default
      show-search-result
      :search-result="searchResult"
      :area-columns-placeholder="['请选择', '请选择', '请选择']"
      @save="onSave"
      @delete="onDelete"
      @change-detail="onChangeDetail"
    />
  </div>
</template>

<script>
import { addss } from "@/api/address";
import { Toast } from "vant";
const areaList = {
  province_list: {
    110000: "北京市",
    120000: "天津市",
    130000: "陕西省",
  },
  city_list: {
    110100: "北京市",
    120100: "天津市",
    130100: "西安市",
    130101: "咸阳市",
    130102: "渭南市",
  },
  county_list: {
    110101: "东城区",
    110102: "西城区",
    // ....
    120101: "东区",
    120102: "西区",
    130101: "新城区",
    130102: "新城区",
    130103: "雁塔区",
  },
};
export default {
  data() {
    return {
      areaList,
      searchResult: [],
    };
  },
  methods: {
    goback() {
      this.$router.back();
    },
    onSave(val) {
      console.log(val.name);
      Toast("新增成功");
      addss({
        userid: localStorage.getItem("userid"),
        name: val.name,
        tel: val.tel,
        province: val.province,
        city: val.city,
        county: val.county,
        addressDetail: val.addressDetail,
        isDefault: false,
      }).then((res) => {
        console.log(res);
      });
      this.$router.push("/Ress")
    },
    onDelete() {
      Toast("delete");
    },
    onChangeDetail(val) {
      console.log(val);
      // if (val) {
      //   this.searchResult = [
      //     {
      //       name: "黄龙万科中心",
      //       address: "杭州市西湖区",
      //     },
      //   ];
      // } else {
      //   this.searchResult = [];
      // }
    },
  },
};
</script>

<style scoped>
.top {
  width: 100%;
  height: 3.125rem;
  font-size: 1.25rem;
  text-align: center;
  line-height: 3.125rem;
  border-bottom: 0.0625rem solid black;
  background-color: red;
  position: relative;
}
.zuo {
  position: absolute;
  left: 0.625rem;
  font-size: 1.25rem;
  top: 0.9375rem;
}
</style>